<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>日志查询</title>
  <script src="js/jquery.js"></script>
  <script src="js/laydate/laydate.js"></script>

  <link href="bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

  <link href="bootstrap-select-1.13.9/css/bootstrap-select.min.css" rel="stylesheet">
  <script src="bootstrap-select-1.13.9/js/bootstrap-select.min.js"></script>
  <script src="bootstrap-select-1.13.9/js/i18n/defaults-zh_CN.min.js"></script>
  <script src="js/doT.js"></script>
  <style>
    caption{color: #000;font-weight: bold;}
    .table div{display: inline-block;}
    .table td{word-wrap:break-word;word-break: break-all;}
    .form-inline .w150{width: 160px;}.form-inline .w100{width: 100px;}.form-inline .w40{width: 60px;}
    .bg-warning{background-color: #fff700}
    .navbar-fixed-bottom{min-height: 40px;}
    .center-box{    position: fixed;
      top: 50px;
      bottom: 40px;
      width: 100%;
      overflow-y: auto;}
    .center-box .panel{margin-top: 0.5rem;}
    .center-box .panel-heading{padding: 0.5rem 1rem;}
    .center-box .panel-body{word-wrap: break-word;}
  </style>
  <script src="js/app.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container" style="padding-top:8px;padding-left: 8px;">
    <form class="form-inline" id="query_log" method="get">
      <div class="form-group">
        <select name="address" class="form-control" id="address">
          <option value="">所有</option>
          {list $ip_list}
          <option value="{$val}">{$val}</option>
          {/list}
        </select>
      </div>
      <div class="form-group">
        <select name="type" class="form-control">
          <option value="">类型</option>
          {list $type_list}
          <option value="{$key}">{$val}</option>
          {/list}
        </select>
      </div>
      <div class="form-group">
        <select name="module" id="sel_module" class="form-control">
          <option value="">模块</option>
          {list $module_list}
          <option value="{$key}">{$val}</option>
          {/list}
        </select>
      </div>
      <div class="form-group" id="query_name">
        <input type="text" class="form-control" name="name" value="{?$post['name']}" placeholder="name or path">
      </div>
      <div class="form-group hide">
        <label>code</label>
        <input type="text" class="form-control w100" name="code" value="{?$post['code']}">
      </div>
      <div class="form-group">
        <input type="text" id="msg" class="form-control" name="msg" value="{?$post['msg']}" placeholder="日志内容">
      </div>
      <div class="form-group">
        <input type="text" autocomplete="off" class="form-control w150" name="start" id="start" value="{?$start}" placeholder="开始时间">
      </div>
      <div class="form-group">
        <input type="text" autocomplete="off" class="form-control w150" name="end" id="end" value="{?$end}" placeholder="结束时间">
      </div>
      <input name="page" id="page" type="hidden" value="">
      <textarea id="page_info" style="display: none" name="page_info"></textarea>
      <button type="submit" class="btn btn-default">查询</button>
    </form>
  </div>
</nav>
<div class="center-box">
  <div class="container" id="query_ret">
    {list $ret}
    <div class="panel panel-default">
      <div class="panel-heading">{$key}</div>
      <div class="panel-body">
        {$val}
      </div>
    </div>
    {/list}
  </div>
  <div class="container">
    <div id="errTmpl" class="hide">
      <p style="margin-top: 2rem;" class="text-center text-warning">{{=it}}</p>
    </div>
    <div id="infoTmpl" class="hide">
      <p style="margin-top: 2rem;" class="text-center text-info">{{=it}}</p>
    </div>
  </div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container" id="tfoot" style="text-align: right;padding: 8px 22px 0 0;">
    <a href="javascript:" data-val="prev" style="margin-right: 3rem;display: none;">上一页</a> <a href="javascript:" style="display: none;" data-val="next">下一页</a>
  </div>
</nav>
<script id="log_tmpl" type="text/x-dot-template">
  {{ for(var i in it) { }}
  <div class="panel panel-default">
      <div class="panel-heading">{{=i}}</div>
      <div class="panel-body">
      {{=it[i]}}
      </div>
  </div>
  {{ } }}
</script>
<script>
    autoSelect("address","{$address}")
    autoSelect("type","{?$post['type']}")
    autoSelect("module","{?$post['module']}")
    //时间选择器
    laydate.render({
        elem: '#start',type: 'datetime'
    });
    laydate.render({
        elem: '#end',type: 'datetime'
    });

    var moduleList = $('select[name="module"]')
    moduleList.selectpicker({
      liveSearch:true
    });
    //搜索高亮
    function highlight(){
      var search = $('#msg').val()
      if (search != '') {
        var re = new RegExp('(' + search + ')', 'ig')
        $('#query_ret .panel-body').each(function(){
          $(this).html($(this).html().replace(re, '<span class="bg-warning">$1</span>'))
        });
      }
    }

    $('select[name="type"]').change(function(){
      var type_val = $(this).val();
      if(type_val!=''){
        if(type_val=='log'){
          $('#query_name').val('');
          $('#query_name').hide();
        }else{
          $('#query_name').show();
        }
        moduleList.attr('disabled','disabled');
        $.getJSON('/index/log_list',{address:$('select[name="address"]').val(), type:type_val}, function(json){
          moduleList.removeAttr('disabled');
          if(json.code!=0){
            alert(json.msg);
            return false;
          }
          moduleList.children('option').remove();
          moduleList.append('<option value="">模块</option>');
          for(i in json.data['module_list']){
            moduleList.append('<option value="'+ i +'">'+ i +'</option>');
          }
          moduleList.selectpicker('refresh');
        });
      }
    })
    $('#address').change(function () {
      $('select[name="type"]').trigger('change')
    });

    var queryRet = $('#query_ret');
    var buttonSubmit = $('#query_log').children('button[type="submit"]')
    var logTmpl = doT.template($('#log_tmpl').text())
    var infoTmpl = doT.template($('#infoTmpl').html())
    var errTmpl = doT.template($('#errTmpl').html())

    $('#query_log').submit(function () {
      queryRet.html(infoTmpl('查询中....'))
      buttonSubmit.attr('disabled','disabled')
      $.getJSON('/index/log?json=1', $(this).serialize(), function (json) {
        buttonSubmit.removeAttr('disabled')
        $('#page').val('')
        $('#page_info').val('')
        if(json.code!=0){
          alert(json.msg);
          queryRet.html(errTmpl(json.msg))
          return false;
        }
        $('#page_info').val(JSON.stringify(json.ext.page_info))

        if(json.ext.hasPrev) {
          $('#tfoot a:eq(0)').show()
        }else{
          $('#tfoot a:eq(0)').hide()
        }
        if(json.ext.hasNext) {
          $('#tfoot a:eq(1)').show()
        }else{
          $('#tfoot a:eq(1)').hide()
        }

        queryRet.html('')
        queryRet.html(logTmpl(json.data))
/*        for(i in json.data){
          queryRet.append('<tr><td>'+ i +'</td><td>'+ json.data[i] +'</td></tr>')
        }*/
        highlight()
      });
      return false;
    });
    $('#tfoot a').click(function(){
      $('#page').val($(this).data('val'))
      $('#query_log').submit()
    });
</script>
</body>
</html>